<template>
  <div id="Setting">
    <div class="middle">
      <div class="top">
        <ChevronLeftIcon @click="back()" class="back" />
        <div>设置</div>
        <span>&nbsp;</span>
      </div>
      <div class="box">
        <li @click="goMyself()">
          <div>个人资料</div>
          <span><ChevronRightIcon /></span>
        </li>
        <li @click="goSafe()">
          <div>账号与安全</div>
          <span><ChevronRightIcon /></span>
        </li>
      </div>
      <div class="box">
        <li>
          <div>
            在线微聊
            <div class="zhushi">发布人开启/关闭在线微聊功能</div>
          </div>
          <el-switch v-model="value1" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>自动跟随系统外观模式</div>
          <el-switch v-model="value2" style="--el-switch-on-color: #ff9900" />
        </li>
        <li>
          <div>隐私管理</div>
          <span><ChevronRightIcon /></span>
        </li>
        <li>
          <div>用户服务协议</div>
          <span><ChevronRightIcon /></span>
        </li>
        <li>
          <div>本地缓存</div>
          <span>286.50MB<ChevronRightIcon /></span>
        </li>
        <li>
          <div>关于我们</div>
          <span><ChevronRightIcon /></span>
        </li>
      </div>
      <div class="box exit" @click="goLogin()">退出登录</div>
    </div>
  </div>
</template>
    
  <script setup lang="ts">
import "./Setting.css";
import { ChevronLeftIcon, ChevronRightIcon } from "tdesign-icons-vue-next";
import { ref } from "vue";
import { useRouter } from "vue-router";

let value1 = ref(true);
let value2 = ref(true);

let router = useRouter();
let back = () => {
  router.go(-1);
};
let goSafe = () => {
  router.push("/Safe");
};
let goLogin = () => {
  router.push("/Login");
};
let goMyself = () => {
  router.push("/myself");
};
</script>
    
  <style>
</style>